<template>
  <section class="navbar">
    <section class="navbar-left">
      <logo
        v-if="layout !== 'side' || $route.path === '/error/401'"
        :is-collapse="isCollapse"
      />
      <sidebar v-if="layout === 'top'" />
      <breadcrumb v-if="useBreadcrumb && layout === 'side'" />
      <ul
        v-if="layout === 'mix'"
        class="project-wrap"
      >
        <li
          v-for="subSys of subsystemList"
          :key="subSys.value"
          :class="['project-item', subSys.value === currentSubsystem ? 'current' : '']"
          @click="changeSubsystem(subSys)"
        >
          {{ subSys.label }}
        </li>
      </ul>
    </section>
    <section class="navbar-right">
      <el-divider direction="vertical" />
      <el-dropdown trigger="hover">
        <span class="el-dropdown-link">
          <base-svg-icon
            icon-class="username"
            class-name="icon__username"
          />
          <span class="username">{{ userInfo.userName || '--' }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              @click="logoutHandle"
            >
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-divider direction="vertical" />
      <span
        id="fullScreen"
        class="navbar-right__icon no-pr"
        @click="fullscreenToggle"
      >
        <base-svg-icon
          icon-class="icon-fullscreen"
        />
      </span>
    </section>
  </section>
</template>
<script lang="ts" setup name="navbar">
import { computed, ref } from 'vue';

import { useFullscreen } from '@vueuse/core';
import { ElMessage } from 'hive-plus';

import Breadcrumb from '../breadcrumb/index.vue';
import Logo from '../logo/index.vue';
import Sidebar from '../sidebar/index.vue';

import { useAppStore } from '@/store/app';
import { useUserStore } from '@/store/user';

defineProps({
  isCollapse: {
    type: Boolean,
    default: false,
  },
});

const { toggle: fullscreenToggle } = useFullscreen();

const subsystemList = ref<TypeObject[]>([
  {
    label: 'C1航道',
    value: 'C1',
  },
  {
    label: 'C2航道',
    value: 'C2',
  },
  {
    label: 'C3航道',
    value: 'C3',
  },
  {
    label: 'C4航道',
    value: 'C4',
  }
]);
const currentSubsystem = ref('C1');

const logoutHandle = async() => {
  const result:TypeObject = await useUserStore().logout();
  location.href = result.logoutUrl;
};

const userInfo = computed(() => useUserStore().userInfo);
const useBreadcrumb = computed(() => useAppStore().useBreadcrumb);

const layout = computed(() => useAppStore().layout);

const changeSubsystem = (info:TypeObject) => {
  currentSubsystem.value = info.value;
  ElMessage({
    message: `切换 ${info.label} 的菜单`,
    type: 'warning',
    showClose: true,
  });
};
</script>

<style lang="scss" scoped>
.navbar {
  @include flex-box;

  box-sizing: border-box;
  height: 100%;
  padding: 0 12px;

  .navbar-left {
    display: flex;
    flex: 1;
    align-items: center;
    width: 0;

    .project-wrap {
      display: flex;
      align-items: center;

      .project-item {
        position: relative;
        height: 100%;
        margin: 0 18px;
        font-size: 12px;
        line-height: 28px;
        cursor: pointer;

        &.current {
          font-weight: 700;
          color: #fff;

          &::after {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            content: '';
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgb(20 116 243 / 30%);
          }
        }
      }
    }
  }

  .navbar-right {
    @mixin common {
      display: flex;
      align-items: center;
      height: 36px;
      padding: 0 10px;
      cursor: pointer;
    }

    @include flex-box(flex-end);

    .navbar-right__icon {
      @include common;

      font-size: 20px;

      &.no-pr {
        padding-right: 0;
      }

      .text-size {
        font-size: 12px;
      }
    }

    .el-dropdown-link {
      @include common;

      .icon__username {
        margin-right: 5px;
        font-size: 20px;
      }

      .username {
        min-width: 20px;
        padding: 0 4px;
      }
    }
  }
}

.header__maia-default {
  .navbar-left {
    .project-wrap {
      .project-item {
        &.current {
          color: #007af5;

          &::after {
            background: #007af5;
            box-shadow: 0 1px 3px rgb(20 116 243 / 30%);
          }
        }
      }
    }
  }
}
</style>
